<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帅气的潘</title>
    <style>
        img{
            position: absolute;
            border-radius: 50%;
        }
        body{
            background-color: black;
            text-align: center;
            line-height: 650px;
            color: #fff;
            font-size: 150px;
        }
    </style>
</head>
<body>
    帅气的潘
    <script>
        function pan(x,y){
            this.x=x;
            this.y=y;
            do {
                this.dx = parseInt(Math.random() * 20 - 10);
                this.dy = parseInt(Math.random() * 20 - 10);
            } while (this.dx == 0 && this.dy == 0)
          
            this.r=20;
            this.op=1;
            span.push(this);
            this.init();
        }
        pan.prototype.init=function(){
            this.dom=document.createElement('img');
            this.dom.style.width=this.r*2+'px';
            this.dom.style.height=this.r*2+'px';
            this.dom.style.left=this.x-this.r+'px';
            this.dom.style.top=this.y-this.r+'px';
            this.dom.src='images/pan.jpg';
            document.body.appendChild(this.dom);
        }
        var span=[];
        setInterval(function(){
            for(var i=0;i<span.length;i++){
                span[i].gu();
            }
        },20);
        pan.prototype.gu=function(){
            this.x+=this.dx;
            this.y+=this.dy;
            this.r+=0.2;
            this.op-=0.001;
            this.dom.style.left=this.x-this.r+'px';
            this.dom.style.top=this.y-this.r+'px';
            this.dom.style.width=this.r*2+'px';
            this.dom.style.height=this.r*2+'px';
            this.dom.style.opacity=this.op;
            if(this.op<0){
                for(var i=0;i<span.length;i++){
                    if(span[i]==this){
                        span.splice(i,1);
                    }
                }
                document.body.removeChild(this.dom);
            }
        }
        document.onmousemove=function(e){
            x=e.clientX;
            y=e.clientY;
            new pan(x,y);
        }
        document.onclick=function(){
            window.location='炫彩小球案例.html'
        }
        console.log(new pan)
        
    </script>
</body>
</html>